<template>
  <div class="logins">
    <div class="loginCard">
      <div class="cardTab">
        <div @click="tab = 1;errText = ''" :class="tab === 1?'tabIndex active':'tabIndex'">帐号登录</div>
        <div @click="tab = 2;errText = ''" :class="tab === 2?'tabIndex active':'tabIndex'">验证码登录</div>
      </div>
      <div class="cardInput" v-show="tab === 1">
        <div class="input">
          <a-input placeholder="请输入帐号" v-model="loginData.phone" @change="isErr = false;isErr = ''">
            <a-tooltip slot="suffix" title="重新输入" v-if="isErr">
              <a-icon type="close-circle" style="color: rgba(255, 72, 76, 1)" />
            </a-tooltip>
          </a-input>
        </div>
        <div class="input">
          <a-input placeholder="请输入密码" type="password" v-model="loginData.password" @change="isErr = false;isErr = ''">
            <a-tooltip slot="suffix" title="重新输入" v-if="isErr">
              <a-icon type="close-circle" style="color: rgba(255, 72, 76, 1)" />
            </a-tooltip>
          </a-input>
        </div>
        <div class="code">
          <div class="cardCanvas" @click="getCaptcha"><img :src="codeImg" alt=""></div>
          <a-input placeholder="请输入验证码" v-model="loginData.captcha" style="width:160px!important" />
        </div>
      </div>
      <div class="cardInput" v-show="tab === 2">
        <div class="input">
          <a-input placeholder="请输入手机号" v-model="codeData.phone" @change="isErr = false;isErr = ''">
            <a-tooltip slot="suffix" title="重新输入" v-if="isErr">
              <a-icon type="close-circle" style="color: rgba(255, 72, 76, 1)" />
            </a-tooltip>
          </a-input>
        </div>
        <div class="code" style="margin-bottom: 116px">
          <a-input style="width: 216px" placeholder="请输入验证码" v-model="codeData.code" />
          <a-button type="primary" :disabled="awaitTime" @click="getCode">{{!awaitTime?'获取验证码':setTime + 's'}}</a-button>
        </div>
      </div>
      <div class="cardErr">{{errText?errText:''}}</div>
      <a-button class="cardBtn" type="primary" @click="login">登录</a-button>
      <div class="cardForget" @click="forget">忘记密码</div>
    </div>
  </div>
</template>
<script>
  import { getNavData } from '../../nav/index'
  import {get} from "../../axios/axios";
export default {
  name: 'login',
  data () {
    return {
      tab: 1,
      isErr: false,
      code:'',
      errText: '',
      loginData: {
        phone: '',
        password: '',
        store_no:'',
        captcha_key:'',
        captcha:''
      },
      setTime:60,
      awaitTime:false,
      codeData: {
        phone: '',
        code:''
      },
      codeImg:''
    }
  },
  created() {
    this.getCaptcha();
    let info = JSON.parse(localStorage.getItem('info'));
    if(info && info.token) return this.$router.push({path: '/index'})

  },
  methods:{
    getCaptcha(){
      this.Api.captcha().then(res=>{
        if(res.code !== 200) return;
        this.loginData.captcha_key = res.data.key;
        this.codeImg = res.data.img;
      })
    },
    login(){
      let data = this.tab ===1?this.loginData:this.codeData;
      this.Api.login(data).then(res=>{
        if(res.code === 200){
          localStorage.setItem('info',JSON.stringify(res.data));
          this.Api.permissions().then(res=>{
            if(res.code !== 200) return;
            if(!res.data.web || res.data.web.length<=0){
              return this.$message.warning('该账号未有后台权限')
            }
            localStorage.setItem('subMenus',JSON.stringify(res.data.web));
            let configMenus = [];
            res.data.web.forEach((demo,idx)=>{
              configMenus.push(demo);
              demo.child.forEach(item=>{
                configMenus.push(item)
              })
            });
            for(let i=getNavData.length - 1;i>=0;i--){
              let is_remove = true;
              for(let j=0;j<configMenus.length;j++){
                if(getNavData[i].path === '/'+configMenus[j].url){
                  is_remove = false;
                  break;
                }
              }
              if(is_remove) getNavData.splice(i,1);
            }
            localStorage.setItem('configMenus',JSON.stringify(getNavData));
            let path = getNavData[0].key === 'admin-reservations' || getNavData[0].key === 'admin-customer-center' || getNavData[0].key === 'admin-service-center'?getNavData[0].path:getNavData[1].path;
            this.$router.push({path: path})
          })
        }else if(res.msg === '验证码为空' || res.msg === '验证码不匹配'){
          this.getCaptcha();
          this.errText = res.msg;
        }else{
          this.isErr = true;
          this.errText = res.msg
        }
      })
    },
    getCode(){
      this.Api.smsLogin({phone:this.codeData.phone}).then(res=>{
        if(res.code !== 200) return this.$message.info(res.msg);
        this.awaitTime = true;
        this.timeOut = setInterval(()=>{
          this.setTime -= 1;
          if(this.setTime === 0){
            this.awaitTime = false;
            return clearInterval(this.timeOut)
          }
        },1000)
      })
    },
    forget(){
      // let phone = this.tab === 1?this.loginData.phone:this.codeData.phone;
      // if(!phone) return this.$message.info('请输入帐号');
      this.$router.push({path: '/forget', query: {phone: this.tab === 1?this.loginData.phone:this.codeData.phone}})
    }
  }
}
</script>
